<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生日日历计算器</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            width: 100%;
            max-width: 800px;
            background-color: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            color: white;
            text-align: center;
            padding: 30px 20px;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .input-section {
            padding: 30px;
            background-color: white;
            border-bottom: 1px solid #eee;
        }
        
        .input-group {
            display: flex;
            gap: 10px;
            max-width: 500px;
            margin: 0 auto;
        }
        
        #birthdayInput {
            flex: 1;
            padding: 15px 20px;
            border: 2px solid #e0e0e0;
            border-radius: 50px;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }
        
        #birthdayInput:focus {
            border-color: #ff7e5f;
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 126, 95, 0.2);
        }
        
        #calculateBtn {
            background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 15px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3);
        }
        
        #calculateBtn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(79, 172, 254, 0.4);
        }
        
        #calculateBtn:active {
            transform: translateY(0);
        }
        
        .error-message {
            color: #ff4757;
            text-align: center;
            margin-top: 15px;
            font-weight: 500;
            height: 24px;
        }
        
        .result-section {
            padding: 20px 30px 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .countdown {
            font-size: 1.8rem;
            font-weight: 700;
            margin: 20px 0;
            text-align: center;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .happy-birthday {
            color: #ff6b81;
            text-shadow: 0 2px 4px rgba(255, 107, 129, 0.3);
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .calendar-container {
            width: 100%;
            max-width: 600px;
            margin: 20px auto 0;
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }
        
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(to right, #5a67d8, #4c51bf);
            color: white;
            padding: 15px 20px;
        }
        
        .calendar-title {
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .calendar-year {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 1px;
            background-color: #eef2f7;
        }
        
        .calendar-cell {
            padding: 15px 5px;
            text-align: center;
            background-color: white;
            min-height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        .weekday-header {
            font-weight: 600;
            color: #4a5568;
            background-color: #f7fafc;
            padding: 10px 5px;
        }
        
        .sunday {
            color: #ff4757;
        }
        
        .saturday {
            color: #4facfe;
        }
        
        .today {
            background-color: #e6f7ff;
            font-weight: bold;
        }
        
        .today::after {
            content: "今天";
            position: absolute;
            bottom: 2px;
            right: 2px;
            font-size: 0.6rem;
            background-color: #4facfe;
            color: white;
            padding: 1px 4px;
            border-radius: 3px;
        }
        
        .birthday {
            background-color: #ff6b81;
            color: white;
            font-weight: bold;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            animation: bounce 0.5s;
        }
        
        .birthday::after {
            content: "生日";
            position: absolute;
            bottom: -18px;
            font-size: 0.6rem;
            color: #ff6b81;
            font-weight: bold;
            white-space: nowrap;
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .other-month {
            color: #cbd5e0;
        }
        
        .footer {
            text-align: center;
            padding: 20px;
            color: #718096;
            font-size: 0.9rem;
            border-top: 1px solid #edf2f7;
        }
        
        @media (max-width: 600px) {
            .input-group {
                flex-direction: column;
            }
            
            #calculateBtn {
                width: 100%;
            }
            
            .calendar-cell {
                padding: 10px 2px;
                font-size: 0.9rem;
            }
            
            .countdown {
                font-size: 1.4rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>生日日历计算器</h1>
            <p class="subtitle">输入您的生日日期，生成个性化日历并计算距离生日的天数</p>
        </div>
        
        <div class="input-section">
            <div class="input-group">
                <input type="text" id="birthdayInput" placeholder="请输入生日，格式 YYYY-MM-DD">
                <button id="calculateBtn">计算生日</button>
            </div>
            <div class="error-message" id="errorMsg"></div>
        </div>
        
        <div class="result-section">
            <div class="countdown" id="countdown"></div>
            
            <div class="calendar-container">
                <div class="calendar-header">
                    <div class="calendar-title" id="calendarMonth"></div>
                    <div class="calendar-year" id="calendarYear"></div>
                </div>
                <div class="calendar-grid" id="calendarGrid"></div>
            </div>
        </div>
        
        <div class="footer">
            <p>© 2025 生日日历计算器 | 单文件HTML应用</p>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const birthdayInput = document.getElementById('birthdayInput');
            const calculateBtn = document.getElementById('calculateBtn');
            const errorMsg = document.getElementById('errorMsg');
            const countdown = document.getElementById('countdown');
            const calendarMonth = document.getElementById('calendarMonth');
            const calendarYear = document.getElementById('calendarYear');
            const calendarGrid = document.getElementById('calendarGrid');
            
            // 初始化日历
            generateCalendar(new Date());
            
            // 按钮点击事件
            calculateBtn.addEventListener('click', function() {
                const birthdayStr = birthdayInput.value.trim();
                errorMsg.textContent = '';
                
                // 验证日期格式
                if (!isValidDate(birthdayStr)) {
                    errorMsg.textContent = '格式错误，请重新输入（格式：YYYY-MM-DD）';
                    return;
                }
                
                // 解析日期
                const [year, month, day] = birthdayStr.split('-').map(Number);
                const birthday = new Date(year, month - 1, day);
                
                // 验证日期是否合法
                if (isNaN(birthday.getTime())) {
                    errorMsg.textContent = '无效日期，请检查后重新输入';
                    return;
                }
                
                // 生成日历并计算剩余天数
                processBirthday(birthday);
            });
            
            // 日期格式验证函数
            function isValidDate(dateStr) {
                const regex = /^\d{4}-\d{1,2}-\d{1,2}$/;
                if (!regex.test(dateStr)) return false;
                
                return true;
            }
            
            // 处理生日日期
            function processBirthday(birthday) {
                const today = new Date();
                const currentYear = today.getFullYear();
                
                // 确定要显示日历的年份和月份
                let displayYear = currentYear;
                let displayMonth = today.getMonth();
                
                // 如果生日月份在当前月份之前，则使用明年同月
                const birthdayMonth = birthday.getMonth();
                if (birthdayMonth < displayMonth || 
                   (birthdayMonth === displayMonth && birthday.getDate() < today.getDate())) {
                    displayYear = currentYear + 1;
                }
                
                // 生成日历
                const displayDate = new Date(displayYear, displayMonth, 1);
                generateCalendar(displayDate, birthday);
                
                // 计算剩余天数
                calculateDaysUntilBirthday(today, birthday);
            }
            
            // 生成日历
            function generateCalendar(date, birthday = null) {
                // 清除现有日历
                calendarGrid.innerHTML = '';
                
                // 设置日历标题
                const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', 
                                  '七月', '八月', '九月', '十月', '十一月', '十二月'];
                calendarMonth.textContent = monthNames[date.getMonth()];
                calendarYear.textContent = date.getFullYear();
                
                // 添加上一周的星期标题
                const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
                weekdays.forEach((day, index) => {
                    const cell = document.createElement('div');
                    cell.className = 'calendar-cell weekday-header';
                    if (index === 0) cell.classList.add('sunday');
                    if (index === 6) cell.classList.add('saturday');
                    cell.textContent = day;
                    calendarGrid.appendChild(cell);
                });
                
                // 获取当前月份的第一天和最后一天
                const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
                const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
                
                // 计算第一天是星期几（0 = 星期日, 1 = 星期一, ...）
                const firstDayOfWeek = firstDay.getDay();
                
                // 添加上个月的空白单元格
                for (let i = 0; i < firstDayOfWeek; i++) {
                    const cell = document.createElement('div');
                    cell.className = 'calendar-cell other-month';
                    calendarGrid.appendChild(cell);
                }
                
                // 获取今天日期
                const today = new Date();
                const isCurrentMonth = today.getMonth() === date.getMonth() && today.getFullYear() === date.getFullYear();
                
                // 添加当前月份的日期
                for (let i = 1; i <= lastDay.getDate(); i++) {
                    const cell = document.createElement('div');
                    cell.className = 'calendar-cell';
                    
                    // 检查是否是今天
                    if (isCurrentMonth && i === today.getDate()) {
                        cell.classList.add('today');
                    }
                    
                    // 检查是否是生日
                    if (birthday && 
                        date.getMonth() === birthday.getMonth() && 
                        i === birthday.getDate()) {
                        const birthdayCell = document.createElement('div');
                        birthdayCell.className = 'birthday';
                        birthdayCell.textContent = i;
                        cell.appendChild(birthdayCell);
                    } else {
                        cell.textContent = i;
                    }
                    
                    calendarGrid.appendChild(cell);
                }
            }
            
            // 计算距离生日的天数
            function calculateDaysUntilBirthday(today, birthday) {
                // 创建今年生日的日期对象
                const currentYear = today.getFullYear();
                const nextYear = currentYear + 1;
                
                // 今年生日
                const thisYearsBirthday = new Date(currentYear, birthday.getMonth(), birthday.getDate());
                
                // 明年生日
                const nextYearsBirthday = new Date(nextYear, birthday.getMonth(), birthday.getDate());
                
                let targetBirthday;
                
                // 如果今年生日已经过去，则使用明年生日
                if (today > thisYearsBirthday) {
                    targetBirthday = nextYearsBirthday;
                } else {
                    targetBirthday = thisYearsBirthday;
                }
                
                // 计算天数差
                const diffTime = targetBirthday - today;
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                
                // 显示结果
                if (diffDays === 0) {
                    countdown.innerHTML = '<span class="happy-birthday">🎂 生日快乐！ 🎂</span>';
                } else {
                    countdown.textContent = `距离生日还有 ${diffDays} 天`;
                }
            }
            
            // 初始化时显示今天的日历
            generateCalendar(new Date());
            countdown.textContent = "输入生日后点击计算按钮";
        });
    </script>
</body>
</html>